!function () {
    var screenH = $(window).height();
    function fadeIn(target){
        var timeline = anime.timeline({
            direction: 'normal',
            autoplay: true
        });
        timeline.add({targets:target,opacity:{value:1,duration:700,easing:'easeInSine'}})
            .add({targets:target,scale:{value:1.1,duration:200,easing:'easeInSine'},offset:300})
            .add({targets:target,scale:{value:1,duration:200,easing:'easeInSine'},offset:500});
    }
    function numAug(target){
        var maxnum = $(target+':visible').attr('data-num');
        var num = maxnum%10;

        var numtimer = setInterval(function () {
            num+=10;
            if (num>maxnum){
                clearInterval(numtimer);
                return;
            }
            $(target).html(num);
        },1);
    }
    function snake(target,scrollindex)
    {
        var watcher = $('.scroll-watch'+scrollindex+':visible');
        var snakewrapclass = 'scroll-snake-wrap'+scrollindex;
        watcher.parent().addClass(snakewrapclass);
        var imgnum = watcher.attr('data-snake-img');
        var imgindex = 1;
        var timeline = anime.timeline({
            direction: 'normal',
            autoplay: false
        });
        while (true){
            if(imgindex>imgnum) break;
            var animoffset1 = (imgindex-1)*300;
            var animoffset2 = animoffset1+100;
            var animoffset3 = animoffset1+200;
            var targetstr = '.'+snakewrapclass+' .snake-img'+imgindex;
//            console.log(animoffset1,animoffset2,animoffset3,targetstr);
            timeline.add({targets:targetstr,opacity:{value:1,duration:300,easing:'easeInSine'},offset:animoffset1})
                .add({targets:targetstr,scale:{value:1.1,duration:100,easing:'easeInSine'},offset:animoffset2})
                .add({targets:targetstr,scale:{value:1,duration:100,easing:'easeInSine'},offset:animoffset3});
            imgindex++;
        }
        timeline.play();
    }
    function scrollAnim(target, anim, scrollindex) {
        switch (anim){
            case 'fadein':
                fadeIn(target);
                break;
            case 'numaug':
                numAug(target);
                break;
            case 'snake':
                snake(target,scrollindex);
                break;
            default:
                break;
        }
    }
//滚动监听
    var scrollwatches =[];
    $('.scroll-watch:visible').each(function (index) {
        var targetTop = $(this).offset().top+$(this).height();
        $(this).addClass('scroll-watch'+index);
        var anim = $(this).attr('data-scroll-anim');
        scrollwatches.push({'watcher':'.scroll-watch'+index,'targetTop':targetTop,'animated':0,'anim':anim,'index':index});
    });
    $(window).scroll(function () {
        var curtop = $(this).scrollTop();
        var botpos = curtop+screenH;
        for(var w in scrollwatches){
            if (botpos>scrollwatches[w].targetTop&&scrollwatches[w].animated===0) {
                scrollAnim(scrollwatches[w].watcher+' .scroll-anim-content',scrollwatches[w].anim,scrollwatches[w].index);
                scrollwatches[w].animated=1;
            }
        }
    });
}();
